<template >
    <div class="drawer">
        <transition name="el-fade-in-linear">
            <div v-if="visible" @click="_onCloseClick" class="modal"></div>
        </transition>

        <div v-if="type=='right'" class="content" :style="{right:visible?0:'-100%',width:size,top:0}">
            <i class="el-icon-close" @click="_onCloseClick" v-show="showClose"></i>
            <slot></slot>
        </div>
        <div v-if="type=='left'" class="content" :style="{left:visible?0:'-100%',width:size,top:0}">
            <slot></slot>
            <i class="el-icon-close" @click="_onCloseClick" v-show="showClose"></i>
        </div>
        <div v-if="type=='top'" class="content" :style="{top:visible?0:'-100%',height:size,left:0}">
            <slot></slot>
            <i class="el-icon-close" @click="_onCloseClick" v-show="showClose"></i>
        </div>
        <div v-if="type=='bottom'" class="content" :style="{bottom:visible?0:'-100%',height:size,left:0}">
            <slot></slot>
            <i class="el-icon-close" @click="_onCloseClick" v-show="showClose"></i>
        </div>
    </div>
</template>

<script type="text/javascript">
/**
 * @Author dingxing [2022-07-29 17:08:10]
 * @Description 抽屉
 */
export default {
    name: 'drawer-vue',
    components: {
    },

    props: {
        visible: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: "80%"
        },
        type: {
            type: String,
            default: 'left'
        },
        'show-close': {
            type: Boolean,
            default: false
        }
    },

    data() {
        return {}
    },

    watch: {},

    created() { },

    mounted() {
    },

    methods: {
        _onCloseClick() {
            this.$parent.visible = false;
            this.$emit('close');
        }
    }
}
</script>

<style lang="less" scoped>
.drawer {
    .modal {
        background: #000; //手机 qq浏览器不支持 颜色透明度 用opacity代替,也可以用 rgb代替透明的
        opacity: 0.7;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 998;
    }
    .content {
        position: fixed;
        height: 100%;
        width: 100%;
        z-index: 999;
        transition: all 0.5s;
        overflow: auto;
        background: white;
        > i {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 20px;
        }
    }
}
</style>